{"componentChunkName":"component---src-templates-blog-post-js","path":"/How-to-build-Netflix's-Coming-Soon-page-in-React/","result":{"data":{"site":{"siteMetadata":{"title":"Aleks Popovic - personal website and blog"}},"markdownRemark":{"id":"ae8102d3-b79f-567b-8542-1df7711fa98c","excerpt":"A couple of days ago I noticed something interesting in the Netflix mobile app. It has a Coming Soon page which shows movies and TV shows that are soon coming…","html":"<p>A couple of days ago I noticed something interesting in the Netflix mobile app. It has a Coming Soon page which shows movies and TV shows that are soon coming to Netflix.</p>\n<p>It has a few interesting functionalities. It’s loading data from somewhere and sorting it into cards. You can bookmark a movie to let Netflix know you want to be notified when it comes out. It has a cool, modern looking share menu for which you need to manage state.</p>\n<p>What’s interesting is - this page is not available outside of their mobile app - so you can’t find it on your desktop or TV, and that got me thinking, wouldn’t it be cool to recreate it for web?</p>\n<p>So, that’s what we are doing today. I am going to show you how you can recreate Netflix’s Coming Soon page in React, and I will show you some interesting concepts that you can adapt and use in your other React projects, like handling and rendering data, using state hooks, and sharing states between your components. The whole project is a bit too lengthy to fit into a single blog post, but you can check out the video version with full instructions and explanations on Youtube:</p>\n<div class=\"gatsby-resp-iframe-wrapper\" style=\"padding-bottom: 56.25%; position: relative; height: 0; overflow: hidden; margin-bottom: 1.0725rem\" > <iframe src=\"https://www.youtube.com/embed/lEXc1UTTLzc\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen style=\" position: absolute; top: 0; left: 0; width: 100%; height: 100%; \"></iframe> </div>\n<hr>\n<div class=\"sectionHighlight\">If you have any questions or comments you can reach out to me on <a href=\"https://twitter.com/alekswritescode\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter</a> and <a href=\"https://www.instagram.com/aleks.popovic/\" target=\"_blank\" rel=\"noopener noreferrer\">Instagram</a>, where I also post interesting code tidbits and designs.\n<p>I also have a <a href=\"https://www.youtube.com/AleksPopovic\" target=\"_blank\" rel=\"noopener noreferrer\">YouTube channel</a> where I regularly upload React and web dev tutorials, so if that’s your cup of tea feel free to support me by subscribing.</div></p>","frontmatter":{"title":"How to build Netflix's Coming Soon page in React","series":null,"seriesLink":null,"date":"November 02, 2020","description":"A couple of days ago I noticed something interesting in the Netflix mobile app. It has a Coming Soon page which shows movies and TV shows that are soon coming to Netflix. It has a few interesting functionalities. It's loading data from somewhere and sorting it into cards. You can bookmark a movie to let Netflix know you want to be notified when it comes out. It has a cool, modern looking share menu for which you need to manage state.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACN0lEQVQoz0WSW0/ScRjHeQGuPIUSKorNIycVkXkIBAHxFIniif8SIxAZGhMlNVNRcxppyyzSpq2pXbiu6qbr1itoXfUqegWffnjTxXd79uz7fL/PSVZlG6O+e1IgQIV1nDp3AKsUp9kToqZLotbhx9AXxBpNYYmsU+eU0DsmMLvGqWwbRGnyUKhzcUvfjdzgRtbincE0EsM8HKWx+wF32oYwD0XQi7i8fRilsZ9ymx/b7gWdLz6Tb/YSmYry/e0Osw8DFDX2omjquxbLCsuapXmm7YPsV+nYrjYgVehYUmuorLWSJ0jyrLso0kW20cX2RK6H480Uf67e82knibr1PsVN/RQLTlZcVmKXkAwW4go1PpUGvxAMlVZTYnAJYp9w7yVX46THF+TeaJACnYM3qXV+HT3nw2KYUlMv+Zqu/x0WCUd/bIXM2Tmnl1dkjk8JJzdJbh1w8vGcg8wZM6E5fl4ckVpaQG70IU0+42JhhlexcWxDCVRtAbFDJwVaJzJlcz+joQTx5RTRxCrxlS3Gwgn8M0keJ9cYeRQnLOK/P77wNbOPwZ6m1X3C5twGh0+fYHa/FPt+jbpdEp3akWXHytM4yK3v4katnZzqTuQNPahaBwW8KFoG6Rid5fe3S2ITcYq1i9S0p9FbNzC51mly7qHUzlNmilAoLi0rEsVlZg8KYx+3jQPXMHrCWMTrNPQHUd0dY3kjTXotRVGFm5vqaSwDu0xF91hcfcdI6JCcMh9ac4CaDi//AMH1OWZZXEErAAAAAElFTkSuQmCC","aspectRatio":2.6666666666666665,"src":"/static/7a22096a1108d65c7262e5302662aef1/0e6e2/netflix.png","srcSet":"/static/7a22096a1108d65c7262e5302662aef1/b460a/netflix.png 480w,\n/static/7a22096a1108d65c7262e5302662aef1/6e898/netflix.png 960w,\n/static/7a22096a1108d65c7262e5302662aef1/0e6e2/netflix.png 1920w","srcWebp":"/static/7a22096a1108d65c7262e5302662aef1/30cf3/netflix.webp","srcSetWebp":"/static/7a22096a1108d65c7262e5302662aef1/35871/netflix.webp 480w,\n/static/7a22096a1108d65c7262e5302662aef1/fcc10/netflix.webp 960w,\n/static/7a22096a1108d65c7262e5302662aef1/30cf3/netflix.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}}}}},"pageContext":{"slug":"/How-to-build-Netflix's-Coming-Soon-page-in-React/","previous":{"excerpt":"Having a dark mode on your website or application has become very popular. Many big websites and applications are coming up with their own…","fields":{"slug":"/Easy-Dark-Mode-Switch-with-React-and-localStorage/"},"frontmatter":{"date":"September 12, 2020","title":"Easy Dark Mode Switch with React and localStorage","series":null,"description":"Having a dark mode on your website or application has become very popular. Many big websites and applications are coming up with their own version of it and if you want to make one for your own React app you can easily do so with very little JavaScript code and a bit of custom CSS. ","tags":["web","react"],"featuredImage":{"id":"93b88c0e-012e-5048-8c63-e6f216be85cc","publicURL":"/static/c84963620317fe9242f44fecd322767a/darkNew.png","relativeDirectory":"Easy-Dark-Mode-Switch-with-React-and-localStorage","relativePath":"Easy-Dark-Mode-Switch-with-React-and-localStorage/darkNew.png"}}},"next":{"excerpt":"Instagram has such a simple, yet elegant design, and on top of that it’s very modular. It’s almost like a puzzle because it has a lot of…","fields":{"slug":"/How-to-build-Instagram-in-React/"},"frontmatter":{"date":"November 17, 2020","title":"How to build Instagram in React","series":null,"description":"Instagram has such a simple, yet elegant design, and on top of that it's very modular. It's almost like a puzzle because it has a lot of parts that can be reused throughout the app which makes it very interesting to build as a practice project. We are going to build Instagram in React and we are going to reuse as much of our code as we possibly can to make profile cards, story icons, posts and pretty much everything else that exists on Instagram's home page.","tags":["web","react"],"featuredImage":{"id":"5c63fc36-3cdb-5062-8d93-727476be18f6","publicURL":"/static/0e297124781de56c47db06278a84f787/instaBg.png","relativeDirectory":"How-to-build-Instagram-in-React","relativePath":"How-to-build-Instagram-in-React/instaBg.png"}}}}}}